<script lang='tsx'>
import {
  defineComponent, KeepAlive,
  Component as DynamicComponent,
  resolveDynamicComponent
} from 'vue'
import { RouterView, useRoute } from 'vue-router'
export default defineComponent({
  name: 'RouteView',
  props: {
    keepAlive: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    const inKeep = (
      <RouterView>
        {({ Component }: { Component: DynamicComponent }) => (
          <KeepAlive>
            {() => resolveDynamicComponent(Component)}
          </KeepAlive>
        )}
      </RouterView>
    )
    const notKeep = (
      <RouterView/>
    )
    const route = useRoute()
    const { meta } = route
    return () => props.keepAlive || meta.keepAlive ? inKeep : notKeep
  }
})

</script>
<style lang="scss" scoped>
.app-main {
  /* navbar 50px  */
  min-height: calc(100vh - 50px);
}

</style>
